{% extends "base.html" %}

{% block content %}
<div class="container">
    <h2>人才画像列表</h2>
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>员工列表</span>
                    <button class="btn btn-primary" id="compareBtn">数据对比</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>部门名称</th>
                                    <th>岗位名称</th>
                                    <th>职务</th>
                                    <th>职级</th>
                                    <th>关键标签</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="employeeList">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 数据对比模态框 -->
<div class="modal fade" id="compareModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">数据对比结果</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>字段名称</th>
                                <th>页面值</th>
                                <th>数据库值</th>
                                <th>差异状态</th>
                            </tr>
                        </thead>
                        <tbody id="compareResult">
                            <!-- 对比结果将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 页面加载完成后获取数据
document.addEventListener('DOMContentLoaded', function() {
    fetchEmployees();
    
    // 绑定对比按钮点击事件
    document.getElementById('compareBtn').addEventListener('click', function() {
        compareData();
    });
});

// 获取员工列表数据
function fetchEmployees() {
    fetch('/talent/api/employees')
        .then(response => response.json())
        .then(data => {
            const tbody = document.getElementById('employeeList');
            tbody.innerHTML = data.map(emp => `
                <tr>
                    <td>${emp.name}</td>
                    <td>${emp.department}</td>
                    <td>${emp.position}</td>
                    <td>${emp.title}</td>
                    <td>${emp.level}</td>
                    <td>${emp.tags || ''}</td>
                    <td>
                        <button class="btn btn-sm btn-primary" onclick="viewDetails(${emp.id})">查看</button>
                    </td>
                </tr>
            `).join('');
        });
}

// 对比数据
function compareData() {
    // 获取页面数据
    const pageData = {
        // 这里需要根据实际页面数据结构进行调整
        total_employees: 30,
        formal_employees: 27,
        gender_ratio: '1:1.14',
        avg_age: 42.6,
        avg_tenure: '2年5月',
        management_positions: 9,
        reporting_depth: 2.00,
        management_span: 3.63,
        probation_count: 6,
        party_member_ratio: 33.33,
        campus_recruit_ratio: 46.67,
        new_employee_ratio: 0.00,
        turnover_rate: 0.00,
        officer_soldier_ratio: '1:1.56'
    };
    
    // 发送对比请求
    fetch('/talent/api/compare', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            page_data: pageData
        })
    })
    .then(response => response.json())
    .then(data => {
        const tbody = document.getElementById('compareResult');
        tbody.innerHTML = data.differences.map(diff => `
            <tr>
                <td>${diff.field}</td>
                <td>${diff.page_value}</td>
                <td>${diff.db_value}</td>
                <td><span class="badge bg-warning">不一致</span></td>
            </tr>
        `).join('');
        
        // 显示模态框
        new bootstrap.Modal(document.getElementById('compareModal')).show();
    });
}

// 查看详情
function viewDetails(id) {
    // TODO: 实现查看详情功能
    alert('查看详情功能开发中...');
}
</script>
{% endblock %}
